<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>

<head>
    <title>Login</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style type="text/css">
        .login-box {
            border-radius: 15px;
            background-clip: padding-box;
            margin: 200px auto;
            width: 400px;
            padding: 40px;
            background: #fff;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 25px #cac6c6;
        }

        .login-box span {
            font-size: 26px;
            display: inline-block;
            margin: 0 0 30px;
            padding: 0;
            /* text-align: center; */
            color: #273c75;
        }
        .login-box span

        .login-box .login-field {
            position: relative;
            /* border: 1px solid #eaeaea; */
        }

        .login-box .login-field input {
            width: 100%;
            padding: 10px 0;
            font-size: 16px;
            color: #707070;
            margin-bottom: 30px;
            border: none;
            border-bottom: 1px solid #273c75;
            outline: none;
            background: transparent;
        }

        .login-box button {
            background: transparent;
            border: none;
            outline: none;
            color: #fff;
            width: 100%;
            background: #273c75;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
        }
        #register_button{
          color: #c0392b!important;
        }
        #register_btn{
            background: #c0392b!important;
        }

        .bgimg {
            /* 前三行让整合div固定在屏幕的最上方和最左方 */
            position: fixed;
            top: 0;
            left: 0;
            /* 让整个div跟屏幕大小一样，min-width是为了在让屏幕宽度变小后图片停止缩放 */
            width: 100%;
            height: 100%;
            min-width: 1000px;
            /* 让div在整个HTML页面中各个层级的下方 */
            z-index: -10;
            /* 针对IE6 */
            zoom: 1;
            /* 图片平铺，不重复 */
            background-repeat: no-repeat;
            /* background: url("<%= basePath%>img/bg_login.jpg"); */
            background: url('./images/2.jpg');
            /* 接下来三行让图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白 */
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            /* 图片的位置，居中，靠左对齐 */
            background-position: center 0;
        }

        #register {
            display: none;
        }

        #login {
            display: block;
        }
    </style>

</head>



<body>

<body class="bgimg">
<div>
    <div class="login-box">
        <span id="login_button">登录</span>
        <span>|</span>
        <span id="register_button">注册</span>
        <!-- 登录 -->
        <form action="loginController/homePage" method="post" name="f" id="login">
            <div class="login-field">
                <img src="./images/user.png" alt="">
                <input type="text" placeholder="请输入用户名" name="username" id="username" />
            </div>
            <div class="login-field">

                <img src="./images/password.png" alt="">
                <input type="password" placeholder="请输入密码" name="password" id="password" />
            </div>
            <div class="login-sub">
                <button type="submit">登录</button>
            </div>
        </form>
        <!-- 注册 -->
        <form action="registerController/homePage" method="post" name="f" id="register" >

            <div class="login-field">

                <img src="./images/user.png" alt="">
                <input type="text" placeholder="请输入用户名" name="username" id="username2" />
            </div>
            <div class="login-field">

                <img src="./images/password.png" alt="">
                <input type="password" placeholder="请输入密码" name="password" id="password2" />
            </div>
            <div class="login-sub">
                <button type="submit" id="register_btn">注册</button>
            </div>
        </form>
    </div>
</div>
<script>




    console.log('ok')
    var login = $('#login')
    var register = $('#register')

    $(function () {
        $('#login_button').click(function () {
            register.hide()
            login.fadeIn(1000)
        })
        $('#register_button').click(function () {
            register.fadeIn(1000)
            login.hide()
        })

    })
    //注册校验
    register.submit(function (){
        var reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
        var name = document.getElementById("username2").value;
        var password =document.getElementById('password2').value;
        console.log(name)
        if(name =='' || password ==''){
            alert("请输入用户名或者密码");
            return false;
        }else if(!reg.test(name)){
            alert("请输入中文、数字和英文！");
            return false;
        }else{
            alert("注册成功");
            return true;
        }
    })
    //登录校验
    login.submit(function (){
        var reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
        var name = document.getElementById("username").value;
        var password =document.getElementById('password').value;
        console.log(name)
        if(name =='' || password ==''){
            alert("请输入用户名或者密码");
            return false;
        }else if(!reg.test(name)){
            alert("请输入中文、数字和英文！");
            return false;
        }else{
            return true;
        }
    })

</script>
</body>
</body>



</html>
